<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="scss">
@import "assets/styles/reset.css";

* {
  font-family: "Microsoft YaHei", "微软雅黑", "SimHei", Verdana, Arial !important;
  font-size: 16px;
}

#app {
  // min-width: 1600px;
  overflow: hidden;
  background: #f9f9f9;
}
.padding-trbl-20{
  padding: 20px;
}
.flex-row {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.rela{
  position: relative;
}
.abso{
  position: absolute;
}
</style> 
<style lang="less">
  // 内外边距
  .mpLoop(@index) when(@index<=100){
    .margin-t-@{index} {
      margin-top: unit(@index, px);
    }
    .margin-r-@{index} {
      margin-right: unit(@index, px);
    }
    .margin-b-@{index} {
      margin-bottom: unit(@index, px);
    }
    .margin-l-@{index} {
      margin-left: unit(@index, px);
    }
    .margin-lr-@{index} {
      margin-left: unit(@index, px);
      margin-right: unit(@index, px);
    }
    .margin-tb-@{index} {
      margin-top: unit(@index, px);
      margin-bottom: unit(@index, px);
    }
    .margin-trbl-@{index} {
      margin: unit(@index, px);
    }
    .padding-t-@{index} {
      padding-top: unit(@index, px);
    }
    .padding-r-@{index} {
      padding-right: unit(@index, px);
    }
    .padding-b-@{index} {
      padding-bottom: unit(@index, px);
    }
    .padding-l-@{index} {
      padding-left: unit(@index, px);
    }
    .padding-lr-@{index} {
      padding-left: unit(@index, px);
      padding-right: unit(@index, px);
    }
    .padding-tb-@{index} {
      padding-top: unit(@index, px);
      padding-bottom: unit(@index, px);
    }
    .padding-trbl-@{index} {
      padding: unit(@index, px);
    }
    
    .mpLoop(@index+1);
  }
  .mpLoop(0);
  // 字体颜色、背景色
  @colorName: white, themecolor, violet, light-violet, light-purple, grey-purple, gray, dark-grey, dark-gray, black, rose-red, light-oragen, rose-red1, rose-red2 , light-blue, light-green, light-red, pure-red, orange, green, light-gray, pink, gray-blue, dark-blue, sky-blue, dark-green;
  @colorList: white, #409EFF, #8962ff, #8e5dff, #c49ef9, #99a3f8, #666666, #333333, #9ba3b1, #000000, #ff00f0, #ee9a96, #ff2dd5, #f14080, #6d9fff, #38d21e, #ff3a3a, #ff5858, #ff902d, #2ccc4a, #e1e2e3, #df87ff, #9ab9ff, #4b74d0, #13b6b6, #239b4a;
  .colorLoop(@index) when(@index<51){
    @name: extract(@colorName, @index);
    .text-@{name} {
      color: extract(@colorList, @index);
    }
    .bg-@{name} {
      background: extract(@colorList, @index);
    }
    .colorLoop(@index+1);
  }
  .colorLoop(0);
  // 字号
  .FontLoop(@index) when(@index<51){
    .font-@{index} {
      font-size: unit(@index, px);
    }
    .FontLoop(@index+1);
  }
  .FontLoop(0);
  .width100{
    width: 100%;
  }
  .row-between{
    justify-content: space-between;
  }
  .abso-center {
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  .text-cut{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .text-line-cut{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .repeatContentBox{
    width: 80%;
    min-height: 100px;
    left: 10%;
    padding: 15px;
    background: rgba(0, 0, 0, .8);
    border-radius: 5px;
    .repeatContent{
      -webkit-line-clamp: 15;
    }
    .sanjiao_down{
      width:0;
      height:0;
      overflow:hidden;
      font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
      line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      bottom: -20px;
      left: 20%;
    }
  }
  .maskBox{
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .8);
    z-index: 99;
    .maskContentBox{
      width: 70%;
      height: 70%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .maskContent{
      padding-bottom: 200px;
    }
  }
  .text-center{
    text-align: center;
  }
</style>